<template>
  <div>
    <!-- 17.所有页面添加骨架屏优化用户体验 -->
    <van-skeleton title :row="3" :loading="loading">
      <van-nav-bar
        title="分类"
        left-arrow
        @click-left="onClickLeft"
        :border="false"
      >
        <template #right>
          <van-icon name="shopping-cart-o" size="25" color="#000" />
        </template>
      </van-nav-bar>

      <van-grid :border="false">
        <van-grid-item icon="photo-o" text="商品1" />
        <van-grid-item icon="photo-o" text="商品2" />
        <van-grid-item icon="photo-o" text="商品3" />
        <van-grid-item icon="photo-o" text="商品4" />
      </van-grid>
      <!-- 16.正确实现商品分类页布局,并实现右侧商品区域可以使用鼠标上下滑动 -->
      <van-tree-select
        v-model:main-active-index="activeIndex"
        height="73vh"
        :items="items"
      >
        <template #content>
          <div v-if="activeIndex === 0">
            <van-card
            v-for="item in 10"
            :key="index"
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          />
          </div>
          <div v-if="activeIndex === 1">
            <van-card
            v-for="item in 14"
            :key="index"
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题111"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          />
          </div>
          <div v-if="activeIndex === 2">
            平价好菜
          </div>
          <div v-if="activeIndex === 3">
            本地蔬菜
          </div>
        </template>
      </van-tree-select>

      <footer>
        <TabBar :index="1" />
      </footer>
    </van-skeleton>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import TabBar from "@/components/TabBar.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const onClickLeft = () => router.back();
const activeIndex = ref(0);
const items = [
  {
    text: "爆品推荐",
  },
  {
    text: "新品",
  },
  {
    text: "平价好菜",
  },
  {
    text: "本地蔬菜",
  },
];
const loading = ref(true);

onMounted(() => {
  loading.value = false;
});
</script>
<style lang="scss" scoped>
footer {
  height: 46px;
}
</style>